<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset='utf-8'>
		<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
		<style>
			
		</style>
	</head>
	<body>
		<select id='cid'>
			<option>--请选择--</option>
		</select>
	</body>
	<script type="text/javascript">
		$.ajax({
			url:'6.php',
			async:false,				//是否异步
			type:'post',				//请求方式
			data:{upid:0},				//发送的数据
			dataType:'json',			//响应的数据类型
			error:function()			//失败时回调函数
			{
				alert('ajax请求失败');
			},
			success:function(data)		//成功时回调函数
			{
				console.log(data);
				for (var i = 0; i < data.length; i++) {
					$('#cid').append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
				};
			}
		});

		$("select").live("change",function(){
			//先清除后面的select，再添加新的select
			$(this).nextAll("select").remove();
			//因为下面需要用到当前对象，但是是另一个函数体内，不能用$(this)
			var ob = $(this);
			//判断选择的是不是默认的请选择
			if($(this).val() != '--请选择--'){
				var upid = $(this).val();
				$.ajax({
					url:'6.php',
					async:false,				//是否异步
					type:'post',				//请求方式
					data:{upid:upid},				//发送的数据
					dataType:'json',			//响应的数据类型
					error:function()			//失败时回调函数
					{
						alert('ajax请求失败');
					},
					success:function(data)		//成功时回调函数
					{
						// console.log(data);
						//判断是否还有数据返回
						if(data.length>0){
							//新建一个select标签
							var select = $("<select><option>--请选择--</option></select>");
							//循环给select标签添加上option
							for (var i = 0; i < data.length; i++) {
								$(select).append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
							};
							//追加到前一个select后面
							ob.after(select);
						}
					}
				});
			}
			
		});
	</script>
</html>